<template>
  <!-- 购物车详情栏  半透明背景和购物车列表 -->
  <transition name="slide">
    <div class="list-car" v-show="showCar" @click.stop="">
      <div class="list-header">
        <span class="gwc">购物车</span>
        <span class="delete" @click="deleteAll">清空</span>
      </div>
      <div class="list-wrapper" ref="listWrapper">
        <ul>
          <li class="list-item border-bottom"
            v-for="(item, index) of sellectFoods"
            :key="index"
          >
            <p class="item-name">{{item.name}}</p>
            <div class="extra">
              <p class="item-price">
                <span class="rmb">￥</span>
                <span>{{item.price}}</span>
              </p>
              <shop-act :food="item"></shop-act>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </transition>
</template>

<script>
import BScroll from 'better-scroll'
import { mapState } from 'vuex'
import ShopAct from './ShopAct'
export default {
  name: 'CarList',
  props: {
    showCar: Boolean
  },
  components: {
    ShopAct
  },
  computed: {
    ...mapState(['sellectFoods'])
  },
  mounted () {
    this.listScroll = new BScroll(this.$refs.listWrapper, {
      click: true
    })
  },
  methods: {
    deleteAll () {
      this.sellectFoods.forEach(food => {
        food.count = 0
      })
      // 清空购物车列表 sellectFoods 为空
      this.sellectFoods.splice(0)
    }
  },
  watch: {
    showCar () {
      // 监测购物车列表显示时，dom 或许或改变，刷新 scroll
      this.$nextTick(() => {
        this.listScroll.refresh()
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .slide-enter, .slide-leave-to
    transform translateY(5rem)
    opacity 0
  .slide-enter-active, .slide-leave-active
    transition .5s
  .list-car
    z-index -1
    position absolute
    bottom 1rem
    left 0
    right 0
    height 5rem
    overflow hidden
    background-color #999
    .list-header
      background-color #f3f5f7
      overflow hidden
      padding 0 .4rem
      line-height .85rem
      color #000000
      border-bottom .02rem solid rgba(7, 17, 27, .1)
      .gwc
        float left
      .delete
        font-size .25rem
        color rgb(0, 150, 220)
        float right
    .list-wrapper
      padding 0 .4rem
      height 4.15rem
      background-color #ffffff
      overflow hidden
      .list-item
        height 1rem
        display flex
        justify-content space-between
        align-items center
        .item-name
          color #000000
        .extra
          // width 2.5rem
          height .4rem
          color rgb(240, 20, 20)
          position relative
          .item-price
            width .7rem
            vertical-align top
            display inline-block
            font-size .3rem
            line-height .65rem
            .rmb
              font-size .2rem
</style>
